<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07-过滤选择器</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script>
        $(function () {

            /**
             * 知识点：
             * :first / :last
             * :not(selector)
             * :gt(index) / :lt(index)
             * :contains()
             * :hidden
             * selector[attribute]
             * selector[attribute=value]
            */

            /**
             * 1. 选择第一个div
            */
            // $('div:first').css('background', 'red')

            /**
             * 2. 选择最后一个class为box的元素
            */
            // $('.box:last').css('background', 'red')

            /**
             * 3. 选择所有class属性不为box的div
            */
            // $('div:not(.box)').css('background', 'red')

            /**
             * 4. 选择第二个和第三个li元素
            */
            // $('li:gt(0):lt(2)').css('background', 'red')     // 多个过滤选择器不是同时执行, 而是依次
            // $('li:lt(3):gt(0)').css('background', 'red')

            /**
             * 5. 选择内容为BBBBB的li
            */
            // $('li:contains("BBBBB")').css('background', 'red')

            /**
             * 6. 选择隐藏的li
            */
            // $('li:hidden').css('display', 'block')

            /**
             * 7. 选择有title属性的li元素
            */
            // $('li[title]').css('background', 'red')

            /**
             * 8. 选择所有属性title为hello的li元素
            */
            // $('li[title="hello"]').css('background', 'red')

        })
    </script>
</head>

<body>
    <div id="div1" class="box">class为box的div1</div>
    <div id="div2" class="box">class为box的div2</div>
    <div id="div3">div3</div>
    <span class="box">class为box的span</span>
    <br />
    <ul>
        <li>AAAAA</li>
        <li title="hello">BBBBB</li>
        <li class="box">CCCCC</li>
        <li title="hello">DDDDDD</li>
        <li title="two">BBBBB</li>
        <li style="display:none">我本来是隐藏的</li>
    </ul>
</body>

</html>